// src/components/chat/SenderHeader.tsx
import { Attachments, Sender} from '@ant-design/x';
import { CloudUploadOutlined } from '@ant-design/icons';
import React from 'react';
import type { GetProp } from 'antd';

interface SenderHeaderProps {
  attachmentsOpen: boolean;
  setAttachmentsOpen: React.Dispatch<React.SetStateAction<boolean>>;
  attachedFiles: GetProp<typeof Attachments, 'items'>;
  setAttachedFiles: React.Dispatch<React.SetStateAction<GetProp<typeof Attachments, 'items'>>>;
}

const SenderHeader: React.FC<SenderHeaderProps> = ({
  attachmentsOpen,
  setAttachmentsOpen,
  attachedFiles,
  setAttachedFiles,
}) => {
  return (
    <Sender.Header
      title="Upload File"
      open={attachmentsOpen}
      onOpenChange={setAttachmentsOpen}
      styles={{ content: { padding: 0 } }}
    >
      <Attachments
        beforeUpload={() => false}
        items={attachedFiles}
        onChange={(info) => setAttachedFiles(info.fileList)}
        placeholder={(type) =>
          type === 'drop'
            ? { title: 'Drop file here' }
            : {
                icon: <CloudUploadOutlined />,
                title: 'Upload files',
                description: 'Click or drag files to this area to upload',
              }
        }
      />
    </Sender.Header>
  );
};

export default SenderHeader;